<template>
  <body>
    <div class="top">
      <div style="height: 8px"></div>
      <el-button
        style="margin-left: 15%;"
        type="primary"
        icon="el-icon-arrow-left"
        size="medium"
        plain
        @click="last"
      >
        上一份
      </el-button>
      <el-button
        style="margin-right: 45%;"
        type="primary"
        icon="el-icon-arrow-right"
        size="medium"
        plain
        @click="next"
      >
        下一份
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-download"
        size="medium"
        plain
        @click="downloadPDF()"
      >
        下载答卷
      </el-button>
      <div style="height: 8px"></div>
      <hr />
    </div>

    <div style="height: 110px"></div>
    
    <div class="headline">
        <span>{{ headline }}</span>
    </div>

    <div class="problem">
      <div style="height: 7px"></div>
      <div>序号：{{ answers[index].index }}</div>
      <div style="height: 7px"></div>
      <div>提交时间：{{ answers[index].date }}</div>
      <div style="height: 7px"></div>
      <div v-show="type==='EXAM'">总分：{{ answers[index].grade }}</div>
      <div style="height: 7px"></div>
      <div v-show="type==='EXAM'">答对题数：{{ answers[index].num }}</div>
      <div style="height: 7px"></div>
      <hr style="background-color: #409EFF; height: 2px; border: none;" />
      <div style="height: 20px"></div>
    </div>

    <div
      v-for="(q,i) in questions"
      :key="i"
      class="problem"
    >
      <p>{{ i+1 }}. </p>
      <p>{{ q.title }}</p>
      <p style="color: red" v-show="!q.noneable">*</p>
      <p class="problemType">【{{ q.type }}】</p>
      <div style="color: rgb(99, 99, 99)">{{ answers[index].answer[i].a }}</div>
      <div style="height: 20px"></div>


      <div v-show="q.rightAnswer!=='none'">

        <div v-show="q.rightAnswer!==answers[index].answer[i].a">
          <div style="color: red;" class="result" >
            <i class="el-icon-circle-close"> 回答错误</i>
            <p v-show="grade!==0" style="float:right">+0分</p>
          </div>
          <div style="height: 7px"></div>
          <div style="color: #67C23A" class="result">正确答案：{{ q.rightAnswer }}</div>
        </div>

        <div v-show="q.rightAnswer===answers[index].answer[i].a">
          <div style="color: #67C23A" class="result">
            <i class="el-icon-circle-check"> 回答正确</i>
            <p v-show="grade!==0" style="float:right">+{{ q.grade }}分</p>
          </div>
        </div>

        <div style="height: 20px"></div>

      </div>

    </div>

  </body>
</template>

<script>

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf'

export default {

  name: 'PersonalAnswers',
  component: {},

  data() {
    return {

      index: -1,

      is_loading: true,

      id: "",

      type: "",

      total: 5,

      headline: "",

      questions: [],

      answers: []

    

    }
  },

  mounted() {
    this.is_loading = true;
    this.id = this.$route.query.id;
    this.index = this.$route.query.index;
    var that = this;
    this.axios.get("/result/analyzeAll",{qnid: this.id}).then(
      function(response) {
        that.message = response.data.data.message;

        if (that.message === "notNone") {
          that.headline = response.data.data.headline;
          that.total = response.data.data.total;
          response.data.data.questions.forEach((q) => {
            that.questions.push(q);
          })
          that.questions.forEach((question) => {
            if (question.type === "RADIO") question.type = "单选题";
            else if(question.type === "CHECKBOX") question.type = "多选题";
            else if(question.type === "INPUT") question.type = "填空题";
            else if(question.type === "RATING") question.type = "评分题";
          })
          response.data.data.answers.forEach((a) => {
            that.answers.push(a)
          })
        }

      },
      function () {  }
    )
    .finally(() => this.is_loading = false)
  },

  methods: {

    last: function() {
      if (this.index !== 0) this.index = this.index - 1;
      else alert("这已经是第一份答卷了！");
    },

    next: function() {
      if (this.index !== this.total - 1) this.index = Number(this.index) + 1;
      else alert("这已经是最后一份答卷了！");
    },

    downloadPDF: function() {

      let DomName = document.body
      console.log("正在帮您导出......");
      window.pageYoffset = 0; // 滚动置顶
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;

      var shareContent = DomName; //需要截图的包裹的（原生的）DOM 对象
      console.log(shareContent); //打印看有没有获取到dom
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      var scale = 2; //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放，在此我是把canvas放大了2倍
      canvas.height = height * scale; //定义canvas高度 *缩放
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      html2canvas(DomName, {
        //允许跨域图片的加载
        useCORS: true,
        dpi: window.devicePixelRatio , //将分辨率提高到特定的DPI 提高四倍
        //scale: 2, //按比例增加分辨率
      }).then(function(canvas) {
        var context = canvas.getContext("2d");
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        var imgData = canvas.toDataURL("image/", 1.0); //转化成base64格式,可上网了解此格式
        var img = new Image();
        img.src = imgData;
        img.onload = function() {
          img.width = img.width / 2; //因为在上面放大了2倍，生成image之后要/2
          img.height = img.height / 2;
          img.style.transform = "scale(0.5)";
          var doc;
          if (this.width > this.height)
            //此可以根据打印的大小进行自动调节
              doc = new JsPDF("l", "mm", [
              this.width * 0.555,
              this.height * 0.555
            ]);
          else {
              doc = new JsPDF("p", "mm", [
              this.width * 0.555,
              this.height * 0.555
            ]);
          }
          doc.addImage(imgData, "jpeg", 10, 0, this.width * 0.505, this.height * 0.545);
          doc.save("答卷.pdf");
          console.log("倒数3秒导出啦");
        };
      });

    },

  }
}
</script>

<style>

  p {
    display: inline-block;
    margin: 2px;
  }

  .top {
    width: 100%;
    height: 54px;
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 999;
  }

  .problem {
    width: 60%;
    margin: 0 auto;
  }

  .problemType {
    font-weight: 100;
    color: rgb(163, 162, 162);
  }

  .headline {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    font: normal bold 35px serif;
  }

  .result {
    background-color: rgba(241, 241, 241, 0.692);
    border-radius: 4px;
    line-height: 2;
  }

</style>